<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>Document</title>
    <script src="./ezuikit.8.0.8.js"></script>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <div className="demo">
      <h2>视频模式使用示例：<button onClick="fullScreen()">全屏</button></h2>
      <div id="video-container"></div>
      <div>
        <button onClick="init()">init</button>
        <button onClick="play()">play</button>
        <button onClick="stop()">stop</button>
        <button onClick="getOSDTime()">getOSDTime</button>
        <button onClick="capturePicture()">capturePicture</button>
        <button onClick="openSound()">openSound</button>
        <button onClick="closeSound()">closeSound</button>
        <button onClick="startSave()">startSave</button>
        <button onClick="stopSave()">stopSave</button>
        <button onClick="ezopenStartTalk()">开始对讲</button>
        <button onClick="ezopenStopTalk()">结束对讲</button>
        <button onClick="fullScreen()">全屏</button>
        <button onClick="destroy()">destroy</button>
      </div>
      <p style="font-style: italic">
        播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo
      </p>
      <button
        id="close-full-screen-btn"
        style="
          position: fixed;
          bottom: 20px;
          right: 20px;
          transform: rotate(90deg);
          display: none;
          z-index: 1001;
        "
        onClick="closeFullScreen()"
      >
        取消
      </button>
    </div>
    <script src="./fullScreenMobile.js"></script>
    <script>
      var player;
      const width = document.body.clientWidth || 375;

      // fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
      //   .then(response => response.json())
      //   .then(res => {
      //     var accessToken = res.data.accessToken;

      // });
      const robot = {
        first: {
          accessToken:
            "at.5aueuo6z04jes7e12fuhq17fallqqacv-86ty5ccxy1-0mm4sjc-85zhxynm4",
          url: "ezopen://lws12345678@ezcpcloudopen.wens.com.cn/FH8286873/1.hd.live",
        },
        second: {
          accessToken:
            "at.5aueuo6z04jes7e12fuhq17fallqqacv-86ty5ccxy1-0mm4sjc-85zhxynm4",
          url: "ezopen://lws12345678@ezcpcloudopen.wens.com.cn/FH8286858/1.hd.live",
        },
      };
      function init() {
        console.log("初始化播放器");
        player = new EZUIKit.EZUIKitPlayer({
          id: "video-container", // 视频容器ID
          accessToken:
            "at.6ctzv0cq303xt9yp5ud3roma91dc1vv9-41ydc7qf40-0j9x2xk-wvpk0kgwq",
          url: "ezopen://lws12345678@open.ys7.com/FH8286826/1.hd.live",
          template: "mobileLive", // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
          plugin: ["talk"], // 加载插件，talk-对讲
          width: width,
          height: (width * 9) / 16,
          language: "en", // zh | en
          env: {
            // https://open.ys7.com/help/1772?h=domain
            // domain默认是 https://open.ys7.com, 如果是私有化部署或海外的环境，请配置对应的domain
            // 正式环境https://ezcpcloudopen.wens.com.cn
            // The default domain is https://open.ys7.com If it is a private deployment or overseas (outside of China) environment, please configure the corresponding domain
            domain: "https://open.ys7.com",
          },
          // 日志打印设置
          loggerOptions: {
            // player.setLoggerOptions(options)
            level: "INFO", // INFO LOG  WARN  ERROR
            name: "ezuikit",
            showTime: true,
          },
          // 视频流的信息回调类型
          /**
           * 打开流信息回调，监听 streamInfoCB 事件
           * 0 : 每次都回调
           * 1 : 只回调一次
           * 注意：会影响性能
           * 默认值 1
           */
          streamInfoCBType: 1,
          staticPath: "/ezuikit_static", // 如果想使用本地静态资源，请复制根目录下ezuikit_static 到当前目录下， 然后设置该值
          handleError: (error) => {
            console.log("handleError", error);
          },
        });
        player.eventEmitter.on(
          EZUIKit.EZUIKitPlayer.EVENTS.videoInfo,
          (info) => {
            console.log("videoinfo", info);
          }
        );

        player.eventEmitter.on(
          EZUIKit.EZUIKitPlayer.EVENTS.audioInfo,
          (info) => {
            console.log("audioInfo", info);
          }
        );
        // 首帧渲染成功
        // first frame display
        player.eventEmitter.on(
          EZUIKit.EZUIKitPlayer.EVENTS.firstFrameDisplay,
          () => {
            console.log("firstFrameDisplay ");
          }
        );
        player.eventEmitter.on(
          EZUIKit.EZUIKitPlayer.EVENTS.streamInfoCB,
          (info) => {
            console.log("streamInfoCB ", info);
          }
        );
      }
      init();
      function fullScreen() {
        // 保存所有元素的原始样式
        saveAllOriginalStyles();
        // 设置全屏样式
        setFullScreenStyles();
      }
      function closeFullScreen() {
        // 恢复所有元素的原始样式
        restoreAllOriginalStyles();
      }
      window.closeFullScreen = closeFullScreen;
      function play() {
        var playPromise = player.play();
        playPromise.then((data) => {
          console.log("promise 获取 数据", data);
        });
      }
      function stop() {
        var stopPromise = player.stop();
        stopPromise.then((data) => {
          console.log("promise 获取 数据", data);
        });
      }
      function getOSDTime() {
        var getOSDTimePromise = player.getOSDTime();
        getOSDTimePromise.then((data) => {
          console.log("promise 获取 数据", data);
        });
      }

      function capturePicture() {
        var capturePicturePromise = player.capturePicture();
        capturePicturePromise.then((data) => {
          console.log("promise 获取 数据", data);
        });
      }
      function openSound() {
        var openSoundPromise = player.openSound();
        openSoundPromise.then((data) => {
          console.log("promise 获取 数据", data);
        });
      }
      function closeSound() {
        var closeSoundPromise = player.closeSound();
        closeSoundPromise.then((data) => {
          console.log("promise 获取 数据", data);
        });
      }
      function startSave() {
        var startSavePromise = player.startSave();
        startSavePromise.then((data) => {
          console.log("promise 获取 数据", data);
        });
      }
      function stopSave() {
        var stopSavePromise = player.stopSave();
        stopSavePromise.then((data) => {
          console.log("promise 获取 数据", data);
        });
      }
      function ezopenStartTalk() {
        player.startTalk();
      }
      function ezopenStopTalk() {
        player.stopTalk();
      }

      function destroy() {
        if (player) {
          const result = player.destroy();
          result.then((res) => {
            console.log("什么时候执行");
          });
          console.log("destroy() 返回值:", result);
          console.log("是否为Promise:", result instanceof Promise);
          // 或者检查是否有 then 方法
          console.log("是否有then方法:", typeof result?.then === "function");
        }
        player = null;
      }
    </script>
  </body>
</html>
